<template>
  <div class="">
    我是child-a组件

    <div>原始写法： {{ this.$store.state.count }}</div>

    <div>写法一： {{ $store.state.count }}</div>

    <div>写法二：{{ msg }}</div>

    <button @click="addCount">count++</button>
    <button @click="increment(100)">count++ 加加2</button>
    <hr>
    
    <button @click='mapMutations'>点击触发</button>

    <hr>

    <ul>
      <li v-for="(item,index) in $store.state.list" :key="index">{{item}}</li>
    </ul>

     <ul>
      <li v-for="(item,index) in $store.getters.filterList" :key="index">{{item}}</li>
    </ul>

    <ul>
      <li v-for="(item,index) in filterList1" :key="index">{{item}}</li>
    </ul>

    <ul>
      <li v-for="(item,index) in filterList" :key="index">{{item}}</li>
    </ul>
  <hr>
  <input type="text" v-model="myNum">
    <button @click='addAction(myNum)'>点击触发加加</button>

    <router-link to="/childB">tochildB</router-link>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { mapMutations } from 'vuex'


export default {
  name: "",
  data() {
    return {
      myNum:0
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {
    /* msg() {
          return this.$store.state.msg

} */

    ...mapState(["msg"]), //mapState msg: msg() { return this.$store.state.msg }

    filterList1() {
      return this.$store.getters.filterList
    },

    ...mapGetters(['filterList'])
  },
  mounted() {},
  methods: {
...mapMutations(['increment']),

    addCount() {
      //第一种
      // this.$store.commit("increment");

      //第二种
      this.increment()
    },

    //异步执行 actions 中的代码
    mapMutations() {
      this.$store.dispatch("asyncIncrement")
    },

    addAction(payload) {
      this.$store.dispatch('asyncAdd',payload)
    }
  },
  filters: {}
};
</script>

<style scoped lang="css"></style>
